<link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="lib/overlayscrollbars/styles/overlayscrollbars.min.css">
<link rel="stylesheet" href="dist/css/bootstrap-admin.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f8f9fa;
    }

    .header {
        /*background-color: #b4dbed;*/
        padding: 20px;
        color: black;
    }

    .header h1 {
        margin: 0;
    }

    .welcome-message {
        font-size: 1.2rem;
        font-weight: bold;
    }

    .featured-products {
        margin-top: 2rem;
    }

    .featured-product {
        border: 1px solid #dee2e6;
        border-radius: 5px;
        overflow: hidden;
        transition: transform 0.2s ease-in-out;
    }

    .featured-product:hover {
        transform: translateY(-5px);
    }

    .featured-product img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .featured-product h3 {
        margin: 10px 0;
        font-weight: bold;
    }

    .featured-product p {
        margin: 0;
        font-size: 0.9rem;
    }
</style>
<div class="col-12 pt-2">
    <div class="container">
        <div class="header">
            <h1 class="text-center">天科超市管理系统</h1>
        </div>
        <div class="content">
            <div class="welcome-message text-center mb-4">
                欢迎来到我们的天科超市管理系统！在这里，您可以轻松管理商品、员工、进货和供应商。
            </div>
            <div class="featured-products row gy-4">
                <!-- 示例商品，根据实际需要替换或从数据库动态获取 -->
                <div class="featured-product col-md-6 col-lg-4">
                    <img src="img/7.jpg" alt="" class="img-fluid">
                </div>
                <div class="featured-product col-md-6 col-lg-4">
                    <img src="img/8.jpg" alt="" class="img-fluid">
                </div>
                <div class="featured-product col-md-6 col-lg-4">
                    <img src="img/6.jpg" alt="" class="img-fluid">
                </div>
            </div>
            <div class="featured-products row gy-4">
                <!-- 示例商品，根据实际需要替换或从数据库动态获取 -->
                <div class="featured-product col-md-6 col-lg-4">
                    <img src="img/11.jpg" alt="" class="img-fluid">
                </div>
                <div class="featured-product col-md-6 col-lg-4">
                    <img src="img/9.jpg" alt="" class="img-fluid">
                </div>
                <div class="featured-product col-md-6 col-lg-4">
                    <img src="img/10.jpg" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
</div>
